<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='code'>
    </div>
    <script id='template-head' type="text/template">
        <h3 on-click='this.handlerClick'>{this.props.value}</h3>
    </script>

    <script id='template-headlist' type="text/template">
        <h3 on-click='this.handlerClick'>{this.props.value}</h3>
    </script>


    <script src="template.js"></script>
    <script>

        function Head(props) {
            this.props = props;
            this.state = {};

            if (typeof Head._inited_ == "undefined") {

                //事件监听
                Head.prototype.handlerClick = function () {
                    console.log(this);
                }

                //返回 html
                Head.prototype.render = function () {
                    var templatecontent = document.getElementById("template-head").innerHTML;
                    var func = JSTemplate.getFunc(templatecontent)
                    var html = func.call(this, this);
                    return html;
                }

                //渲染（返回dom）
                Head.prototype.handerRender = function () {

                    var html = this.render();

                    var container = document.createElement("div");
                    container.innerHTML = html;
                    var child = container.children[0];
                    var attrnames = child.getAttributeNames();
                    for(var key in attrnames)
                    {
                        var name = attrnames[key];
                        if(name.indexOf("on-")>-1)
                        {
                            var attrvalue = child.getAttribute(name);
                            //TODO添加事件监听
                            /*
                                将 this.去掉，然后根据值的层次，一层一层的往下取目标 事件处理方法
                            */
                            attrvalue = attrvalue.replace("this.","");
                            var func = this;
                            var fninfo = attrvalue.split('.')
                            for(var fnkey in fninfo)
                            {
                                var fnname = fninfo[fnkey];
                                var func = func[fnname];
                            }
                            if(typeof func =='function') child.addEventListener("click",func)
                            
                            child.removeAttribute(name)
                        }
                    }
                    return child;
                }

                //root.addEventListener("click", this.handlerClick);

                Head._inited_ = true;
            }   
            this.handlerClick = this.handlerClick.bind(this);
        }

        //debugger
        var root = document.getElementById("code");
        var head = new Head({ value: "1234567" });
        var html = head.handerRender();
        root.appendChild(html);
        
    </script>
</body>

</html>